<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue事件处理</title>
</head>
<body>

    <div id="demo">
        <h1> v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？</h1>

<!--        同级情况 会先循环 再进行判断 -->
<!--        <p v-for="child in children" v-if="isFolder">{{child.title}}</p>-->

<!--        不同级情况 会先判断 if 条件 再进行 for 循环 -->
        <template v-if="isFolder">
            <p v-for="child in children">
                {{child.title}}
            </p>
        </template>
    </div>
    <script src="./js/vue.js"></script>

    <script>
        /***
         v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？
         源码中找答案
         compiler/codegen/index.js
         做个测试如下
         **/
        // 创建一个实例！#
        const app = new Vue({
            el: '#demo',
            data () {
                return {
                    children: [
                        {title: 'foo'},
                        {title: 'bar'}
                    ]
                }
            },
            computed: {
                isFolder () {
                    return this.children && this.children.length > 0
                }
            }
        });
        console.log(app.$options.render);
    </script>
</body>
</html>
